<template>
  <div class="container">
    <MetroHead :headTitle="headTitle" />
    <img :src="'http://218.7.112.123:10001/' + cityImg.imgUrl" />
    <van-cell-group>
      <van-field
        v-model="value"
        label="查询站点信息"
        center
        clearable
        placeholder=""
      >
        <template #button>
          <van-button size="small" type="primary" @click="lineSearch()"
            >点击查询</van-button
          >
        </template>
      </van-field>
    </van-cell-group>
    <van-grid
      direction="horizontal"
      :column-num="1"
      v-for="item in cityList"
      :key="item.id"
    >
      <van-grid-item :text="item.lineName" @click="getLineDetail(item.lineId)"/>
    </van-grid>
  </div>
</template>

<script>
import { CityImgApi } from "@/service/metro/metroservice";
import { CityListApi } from "@/service/metro/metroservice";
import { CityStepListApi } from "@/service/metro/metroservice";
import MetroHead from "../metrohead/MetroHead.vue";
export default {
  data() {
    return {
      cityImg: [],
      headTitle: "线路站点",
      cityList: [],
      value: "",
      cityStepList: [],
    };
  },
  methods: {
    async getCityImg() {
      let { data } = await CityImgApi();
      console.log(data);
      if (data.code == 200) {
        this.cityImg = data.data;
      }
    },
    async getCityList() {
      let { data } = await CityListApi();
      console.log(data);
      if (data.code == 200) {
        this.cityList = data.data;
      }
    },
    async lineSearch() {
      let { data } = await CityStepListApi();
      console.log(data);
      if (data.code == 200) {
        this.cityStepList = data;
      }
    },
    getLineDetail(id) {
      this.$router.push({path: '/linedetail', query: {id}})
      console.log(id);
    }
  },
  created() {
    this.getCityImg();
    this.getCityList();
  },
  components: {
    MetroHead,
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 45px;
  img {
    width: 100%;
  }
}
</style>